<template>
    <div>
        <h1 style="text-align: center;">用户添加</h1>
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="用户名">
                <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input type="password" v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="form.tel"></el-input>
            </el-form-item>
            <el-form-item label="角色">
                <el-select v-model="form.role" placeholder="请选择角色">
                    <el-option v-for="role in roles" :key="role._id" :label="role.name" :value="role._id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="是否启用">
                <el-switch
                v-model="form.isShow"
                active-color="#13ce66"
                inactive-color="#ff4949">
                </el-switch>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即创建</el-button>
                <el-button>取消</el-button>
            </el-form-item>
            </el-form>
    </div>
</template>

<script>
import {roleList, adminAdd} from '@/request'
export default {
    data () {
        return {
            form: {
                username: '',
                password: '',
                email: '',
                tel: '',
                isShow: false,
                role: ''
            },
            roles: []
        }
    },
    methods: {
        onSubmit() {
            // console.log(this.form);
            adminAdd(this.form).then(data => {
                let {error_code, msg} = data
                if(error_code === 200) {
                    this.$message({
                        message: msg,
                        duration: 1500,
                        type: 'success',
                        onClose: () => {
                            this.$router.push('/user/list')
                        }
                    })
                } else {
                    this.$message({
                        message: msg,
                        duration: 1500,
                        type: 'error'
                    })
                }
                // console.log(data);
            })
        },
        // 获取所有角色
        getRoles() {
            roleList().then(data => {
                // console.log(data);
                this.roles = data.data.rolelist
            })
        }
    },
    created() {
        this.getRoles()
    }
}
</script>

<style>
    
</style>
